import { Button, Drawer, Form, Input } from "antd";
import { DrawerContainer } from "components/DrawerContainer";
import { useEpicDrawer, useEpicQueryKey } from "./utils";
import { Epic } from "../../types/epic";
import { useAddEpic } from "../../hooks/useEpics";
import { useProjectIdInUrl } from "../billboard/utils";
import { useForm } from "antd/lib/form/Form";

export const CreateEpicDrawer = () => {
  const { visible, onClose: closeEpicDrawer } = useEpicDrawer();
  const { mutateAsync: addEpic, isLoading } = useAddEpic(useEpicQueryKey());
  const projectId = useProjectIdInUrl();
  const [form] = useForm();
  const onClose = () => {
    closeEpicDrawer();
    form.resetFields();
  };
  const handleSubmit = async (values: Partial<Epic>) => {
    await addEpic({ ...values, projectId });
    onClose();
  };
  return (
    <Drawer visible={visible} onClose={onClose} width="100%">
      <DrawerContainer>
        <h1>创建任务组</h1>
        <Form
          layout="vertical"
          style={{ width: "40rem" }}
          onFinish={handleSubmit}
          form={form}
        >
          <Form.Item required={true} label="名称" name="name">
            <Input placeholder="请输入任务组名称" />
          </Form.Item>
          <Form.Item style={{ textAlign: "right" }}>
            <Button htmlType="submit" type="primary" loading={isLoading}>
              提交
            </Button>
          </Form.Item>
        </Form>
      </DrawerContainer>
    </Drawer>
  );
};
